<template>
  <div class="main">
    <Form :model="subject" :label-width="80">
      <FormItem label="标题">
        <Input v-model="subject.title"></Input>
      </FormItem>
      <FormItem label="教材版本">
        <Select style="width:200px">
          <Option value="beijing">语文</Option>
          <Option value="shanghai">数学</Option>
          <Option value="shenzhen">历史</Option>
        </Select>
        <Select style="width:200px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
        <Select style="width:200px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
      </FormItem>

      <FormItem label="章节">
        <Cascader :data="data" style="width:200px"></Cascader>
      </FormItem>

      <FormItem label="题型">
        <RadioGroup v-model="subject.type" @on-change="subject.answer=''">
          <Radio :label="SUBJECT_TYPE.DANXUAN" border>单选题</Radio>
          <Radio :label="SUBJECT_TYPE.DUOXUAN" border>多选题</Radio>
          <Radio :label="SUBJECT_TYPE.PANDUAN" border>判断题</Radio>
          <Radio :label="SUBJECT_TYPE.JIANDA" border>简答题</Radio>
        </RadioGroup>
      </FormItem>

      <FormItem label="选项" v-if="checkIsXZT(subject.type)">
        <div v-for="(item,i) in subject.options" :key="item.id" class="flex optionsItem">
          <div style="width:90%">
            {{i|fmtOrder2ABC}}、
            <Input v-model="item.val" style="width:95%;"></Input>
          </div>
          <Button
            v-show="subject.options.length>2"
            html-type="button"
            type="error"
            @click="del(i)"
          >删除</Button>
        </div>

        <Button
          v-show="subject.options.length<10"
          html-type="button"
          type="primary"
          @click="addOptions"
          icon="ios-add-circle-outline"
        >添加</Button>
      </FormItem>

      <FormItem label="答案">
        <div v-if="subject.type === SUBJECT_TYPE.DANXUAN">
          <RadioGroup v-model="subject.answer">
            <Radio
              :label="index|fmtOrder2ABC"
              v-for="(item, index) in subject.options"
              :key="index"
              border
            >{{index|fmtOrder2ABC}}</Radio>
          </RadioGroup>
        </div>

        <div v-if="subject.type === SUBJECT_TYPE.DUOXUAN">
          <CheckboxGroup v-model="temparr">
            <Checkbox
              :label="index|fmtOrder2ABC"
              v-for="(item, index) in subject.options"
              :key="index"
              border
            >{{index|fmtOrder2ABC}}</Checkbox>
          </CheckboxGroup>
        </div>

        <div v-if="subject.type === SUBJECT_TYPE.PANDUAN">
          <RadioGroup v-model="subject.answer">
            <Radio label="T" border>正确</Radio>
            <Radio label="F" border>错误</Radio>
          </RadioGroup>
        </div>

        <div v-if="subject.type === SUBJECT_TYPE.JIANDA">
          <Input v-model="subject.answer" type="textarea" :autosize="true" />
        </div>
      </FormItem>

      <FormItem label="解析">
        <Input v-model="subject.desc" type="textarea"></Input>
      </FormItem>
      <FormItem>
        <Button @click="Save" type="primary">保存题目</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
let { mapMutations } = createNamespacedHelpers("subject");
export default {
  created() {
    this.subject.type = this.SUBJECT_TYPE.DANXUAN;
  },
  methods: {
    ...mapMutations(["addSubject"]),
    addOptions() {
      this.subject.options.push({
        id: 0,
        val: "",
      });
    },
    Save(){
      this.subject.isSuccess = false
      this.addSubject(this.subject)
      if (this.subject.isSuccess) {
        this.$ms("添加成功！")
      }else{
        this.$me("好像出了点问题？！")
      }
    },
    del(index) {
      this.subject.options.splice(index, 1);
    },
  },
  watch: {
    subject: {
      handler(newValue, oldValue) {
        let i = 1;
        newValue.options.forEach((r) => {
          r.id = i;
          i++;
        });
      },
      deep: true,
    },
    temparr(val) {
      this.subject.answer = val.join(",");
    },
  },
  data() {
    return {
      subject: {
        title: "",
        type: -1,
        options: Array.from({ length: 4 }).map((r, i) => ({ id: i, val: "" })),
        answer: "",
        desc: "",
      },
      // myOptionsCount:3,
      data: [
        {
          value: "1001",
          label: "第一章",
          children: [
            {
              value: "100101",
              label: "第一节",
            },
            {
              value: "100102",
              label: "第二节",
            },
            {
              value: "100103",
              label: "第三节",
            },
            {
              value: "100104",
              label: "第四节",
            },
          ],
        },
        {
          value: "1002",
          label: "第二章",
          children: [
            {
              value: "100201",
              label: "第一节",
            },
            {
              value: "100202",
              label: "第二节",
            },
            {
              value: "100203",
              label: "第三节",
            },
            {
              value: "100204",
              label: "第四节",
            },
          ],
        },
      ],
      temparr: [],
    };
  },
};
</script>

<style lang='scss' scpoed>
.main {
  width: 800px;
  margin: 50px auto;

  .optionsItem {
    margin: 5px 10px;
    justify-content: space-between;
  }
}
</style>